<template>
	<view class="biddingDetail">
		<view class="userInfo">
			<image :src="v.user.headimgurl" mode="" class="userLogo"></image>
			<view class="right disFlex">
				<view class="line1 disFlex one">
					<view>
						<text class="name">{{v.user.nickname}}</text>
						<text class="addr">({{v.city.shortname}})</text>
					</view>
					<view class="lable">{{v.industry.name}}</view>
				</view>
				<view class="infos">
					<view>{{v.create_time}}</view>
					<view style="padding: 0 20rpx;">展位{{v.acreage}}m²</view>
					<view>预算{{v.cost}}</view>
				</view>
			</view>
		</view>
		<view class="content ">
			<view class="word line3">{{v.content}}</view>
			<view class="allWord">全文</view>
		</view>
		<view class="imgs">
			<image v-for="(item,i) in v.img" :key='i' :src="item" mode=""></image>
		</view>
		<view class="lables">
			<view v-for="(val,i) in tab" :key='i'>{{val}}</view>
		</view>
		<view class="timeBox disFlex">
			<view class="time">招标截至时间：{{v.deadline}}</view>
			<view class="person">已有{{v.order_count}}名厂家投标</view>
		</view>
		
		<view class="bottom">
			<button @tap="showPop">投标</button>
		</view>
		
		<view class="pop" v-if="pop">
			<view class="popBox">
				<view class="title">确认您的厂家信息</view>
				<view class="word">{{v.name}}</view>
				<view class="phone">联系方式：{{v.phone}}</view>
				<view class="ques">如有差异请前往个人中心修改</view>
				<view class="popBottom disFlex scale-1px-top">
					<view @tap="canselPop" class="censel scale-1px-right">取消</view>
					<view @tap="go" class="ok">确定投标</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pop:false,
				v:'',
				tab:[],
			}
		},
		onLoad(option) {
			this.id=option.id
		},
		onShow(){
			this.getinfo(this.id)
		},
		methods: {
			showPop () {
				this.pop = true;
			},
			canselPop () {
				this.pop = false;
			},
			go () {
				let userid=uni.getStorageSync('userinfo').id;
				let token=uni.getStorageSync('userinfo').token;
				this.http('/api/tender_order/save', 'post', {user_id:userid,token:token,tender_id:this.v.id}, )
				.then((res)=>{
					if(res.sta==200){
						console.log(res)
						this.pop=false
						this.getnav(this.router(`biddingSuccess`));
					}else{
						this.pop=false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getinfo(id){
				this.http('/api/tender/read', 'post', {id:id}, )
					.then((res) => {
						this.v = res.data
						console.log(res)
						this.tab.push(res.data.industry.name)
						this.tab.push('展位大小'+res.data.acreage+'m²')
						this.tab.push('预算'+res.data.cost+'元')
					})
			}
		}
	}
</script>

<style lang="less">
	.biddingDetail{
		padding: 40rpx 40rpx 100rpx 40rpx;
		.userInfo{
			display: flex;
			align-items: center;
			.userLogo{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.right{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				align-items: flex-start;
				height: 90rpx;
				padding-left: 20rpx;
				flex: 1;
				.one{
					width: 100%;
					.name{
						font-size: 36rpx;
						font-weight: bold;
					}
					.addr{
						font-size: 24rpx;
						padding-left: 8rpx;
						color: #BEC9D7;
					}
					.lable{
						height:40rpx;
						background:rgba(255,241,229,1);
						border-radius:20rpx 0px 20rpx 20rpx;
						padding: 0 15rpx;
						font-size:24rpx;
						color:rgba(254,114,3,1);
						line-height:40rpx;
					}
				}
				.infos{
					display: flex;
					view{
						font-size:24rpx;
						color:rgba(190,201,215,1);
					}
				}
			}
		}
		.content{
			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			.allWord{
				color: #2291FF;
				width: 60rpx;
			}
		}
		.imgs{
			display: grid;
			grid-template-columns: repeat(3, 210rpx);
			grid-column-gap: 20rpx;
			grid-row-gap: 20rpx;
			margin-top: 40rpx;
			image{
				width: 100%;
				height: 210rpx;
			}
		}
		.lables{
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: calc(100% + 20rpx);
			view{
				height:60rpx;
				line-height: 60rpx;
				background:rgba(255,241,229,1);
				border-radius:30rpx 0px 30rpx 30rpx;
				font-size: 26rpx;
				color: #FE7203;
				padding: 0 30rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
		.timeBox{
			margin-top: 40rpx;
			.time{
				font-weight:bold;
				color:rgba(254,114,3,1);
			}
			.person{
				font-size:26rpx;
				color:rgba(190,201,215,1);
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 0 40rpx;
			z-index: 99;
			button{
				width: 100%;
				line-height: 90rpx;
				background:rgba(34,145,255,1) !important;
				border-radius:10rpx;
				color: #fff;
				font-size: 32rpx;
			}
		}
		
		.pop{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 9999;
			background-color: rgba(0,0,0,.3);
			.popBox{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width:610rpx;
				background:rgba(255,255,255,1);
				border-radius:20rpx;
				.title{
					font-size:32rpx;
					font-weight:bold;
					text-align: center;
					padding-top: 30rpx;
				}
				.word{
					padding-top: 40rpx;
					font-size: 26rpx;
					text-align: center;
				}
				.phone{
					padding-top: 10rpx;
					font-size: 26rpx;
					text-align: center;
				}
				.ques{
					padding-top: 20rpx;
					color: #BEC9D7;
					font-size: 22rpx;
					text-align: center;
				}
				.popBottom{
					margin-top: 30rpx;
					view{
						flex: 1;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
					}
					.censel{
						color:rgba(190,201,215,1);
					}
					.ok{
						color: #2291FF;
					}
				}
			}
		}
	}
</style>
